<template>
  <div class="login">
    <div class="loginTop">欢迎登录</div>
    <div class="loginContent">
      <!-- 手机号 -->
      <input type="text" name="phone" class="phone" v-model="phone" placeholder="请输入手机号码" />
      <!-- 密码 -->
      <input type="password" name="passworld" class="passworld" v-model="password" placeholder="请输入密码" />
      <!-- 登录按钮 -->
      <button class="btn" @click="Login">登录</button>
    </div>
  </div>
</template>
<script>
import { getLoginUser } from '@/request/api/home.js'
export default {
  data() {
    return {
      phone: '', // 手机号
      password: '', // 密码
    }
  },
  methods: {
    // 登录
    async Login() {
      // dispatch派生
      let res = await this.$store.dispatch('getLogin', { phone: this.phone, password: this.password })
      console.log(res)

      // 判断状态码
      if (res.data.code === 200) {
        //如果返回的code等于200，说明登录成功，就跳转个人中心页面
        // 调用 updateIsLogin 函数，提交就可以，传一个 true
        this.$store.commit('updateIsLogin', true)

        // 跳转之前，使用 token，保存状态码
        this.$store.commit('updateToken', res.data.token)
        // 获取登录进来的用户信息
        let result = await getLoginUser(res.data.account.id)
        console.log(result)
        // 提交，用户信息的函数
        this.$store.commit('updateUser', result)

        // 跳转到个人中心
        this.$router.push('/infoUser')
      } else {
        // 提示
        alert('手机号码或者密码错误')
        // 清空密码
        this.password = ''
      }
    },
  },
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 41.8rem;
  padding: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(248, 97, 97);

  // 字体欢迎登录
  .loginTop {
    margin-top: 1rem;
    font-size: 1rem;
    color: #fff;
    font-size: 3rem;
  }
  .loginContent {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 2rem;

    // 文本框
    .phone,
    .passworld {
      width: 8rem;
      height: 2rem;
      border: 0.02rem solid #999;
      border-radius: 8%;
    }
    .btn {
      width: 5rem;
      height: 1.6rem;
    }
  }
}

</style>
